<template>
  <view class="list-item-top" v-if="orderitem.shop && orderitem.shop.name">
    <view class="list-item-top-left">
      <image :src="orderitem.shop.logo" mode=""></image>
      <view>{{ orderitem.shop.name }}</view>
      <image :src="asyncImgs.my.icon_right_3" mode=""></image>
    </view>
    <view class="list-item-top-right">
      <!-- <template :style="{color: orderStatus.color}">
        {{ orderStatus.str }}
      </template>
      <image v-if="orderitem.is_cancel == 1 || orderitem.is_confirm == 1" @click="deleteItem" src="../../../static/images/delete_icon.png" alt=""> -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    orderitem: {
      type: Object,
      default: {},
    },
  },
  computed: {
    orderStatus() {
      let str = this.$t('person.status2'),
        color = "#F7271F";
      if (this.orderitem.is_pay == 0 && this.orderitem.pay_type != 2) {
        str = this.$t('order.wait');
      }
      if (this.orderitem.trade_status == 2) {
        str = this.$t('person.status3');
      }
      if (this.orderitem.trade_status == 3) {
        str = this.$t('person.status4');
        color = "#8C8C8C";
      }
      if (this.orderitem.is_cancel == 1) {
        str = this.$t('shop.cancled');
        color = "#8C8C8C";
      }
      //   orderitem.is_cancel == 1 ? "已取消" : "退款申请中"
      return { str, color };
    },
  },
  methods: {
    deleteItem() {
      uni.showModal({
        title: this.$t('order.prompt'),
        content: this.$t('order.confirmDel'),
        success: function (res) {
          if (res.confirm) {
          } else if (res.cancel) {
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.list-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .list-item-top-left {
    display: flex;
    align-items: center;

    view {
      margin: 0rpx 10rpx;
      font-size: 28rpx;
      color: #262626;
      font-weight: 500;
      line-height: 44rpx;
    }

    image:first-child {
      width: 28rpx;
      height: 28rpx;
    }

    image:last-child {
      width: 12rpx;
      height: 20rpx;
    }
  }

  .list-item-top-right {
    font-size: 26rpx;
    color: #f23030;

    image {
      width: 28rpx;
      height: 28rpx;
      margin-left: 30rpx;
    }
  }
}
</style>
